<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table
                    :loading="loading"
                    :tableData="tableData"
                    :tableColumn="tableColumn"
                    :pageSize="pagination.pageSize"
                    :total="pagination.total"
                    @changePage="changePage"
                    @changeID="changeID"
                    :currentPage="pagination.page"
                    :rowKey="rowKey"
                ></zy-table>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @add="add" @set="edit" />
        <el-dialog title="导入数据" :visible.sync="dialogTableVisible">
            <el-upload ref="upload" :action="`/api/${url}/upload`" :file-list="fileList" :auto-upload="false" accept=".xlsx" :on-success="handSuccess" :on-change="handleChange" :on-progress="handError">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi, fileApi } from '@/requset/api'
import zyTags from '@/components/common/zyTags.vue'
import zySelect from '@/components/common/zySelectC.vue'
import zyTable from '@/components/common/zyTable.vue'
import zyForm from '@/components/common/zyForm.vue'
import { deepClone } from '@/plugins/clone'
export default {
    components: {
        zyTags,
        zySelect,
        zyTable,
        zyForm,
    },
    data() {
        return {
            actions: [],
            tableColumn: [],
            formConfig: {},
            idList: [],
            queryForm: {
                page: 1,
                size: 20,
            },
            queryFormC: {},
            dialog: {
                labelWidth: '80px',
                config: [],
                form: {},
                title: '',
            },
            none: [null, undefined, ''],
            loading: false,
            loadingAll: null,
            table_title: '',
            url: '',
            tableData: [],
            baseForm: {},
            pagination: {},
            stat: {},
            confirmText: '确认删除此条数据?',
            confirmText1: '确认删除这些数据?',
            dialogTableVisible: false,
            fileList: [],
            rowKey: 'id',
        }
    },
    methods: {
        from(data) {
            return data
        },
        to(data) {
            return data
        },
        changePage(e) {
            this.queryForm.page = e
            this.searchBtn()
        },
        changeID(val) {
            this.idList = val
        },
        searchBtn() {
            let arr = this.queryForm.scope_id_list
            if (arr.length != 0) this.queryForm.scope_id = arr[arr.length - 1]
            this.getlist()
        },
        search(formValue) {
            this.queryForm = Object.assign(this.queryForm, formValue)
            this.searchBtn()
        },
        resetForm() {
            this.queryForm = deepClone(this.queryFormC)
            this.searchBtn()
        },
        BeforeAdd() {},
        BeforeEdit() {},
        handleAdd() {
            this.BeforeAdd()
            this.dialog.title = '添加' + this.table_title
            this.dialog.form = deepClone(this.baseForm)
            this.$refs.zyform.openDialog('add')
        },
        handleEdit(val) {
            this.BeforeEdit()
            this.dialog.title = '编辑' + this.table_title
            this.dialog.form = this.from(deepClone(val))
            this.$refs.zyform.openDialog('change')
        },
        download() {
            fileApi('post', this.url + '/download', { filename: this.table_title + '.xlsx' }, true).then((res) => {
                if (res.code == 0) {
                    this.$message.success('导出成功')
                }
            })
        },
        submitUpload() {
            if (this.fileList.length === 0) {
                this.$message.error('导入文件不能为空')
                return
            }
            if (this.fileList.length > 1) {
                this.$message.error('一次只能导入一个文件')
                return
            }
            this.$refs.upload.submit()
            this.loadingAll = Loading.service({
                target: 'body',
                background: 'rgb(0,0,0,.4)',
            })
        },
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        handSuccess(res) {
            this.$refs.upload.clearFiles()
            this.fileList = []
            if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogTableVisible = false
                setTimeout(() => {
                    this.searchBtn()
                }, 200)
            } else {
                this.$message.error((res.msg ? res.msg : '') + '导入失败')
            }
        },
        handError(res) {
            this.loadingAll.close()
        },
        add(data) {
            requestApi('post', this.url + '/add', this.to(deepClone(data), true)).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.searchBtn()
                    this.$refs.zyform.closeDialog()
                }
            })
        },
        delete(data) {
            this.$confirm(this.confirmText, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', this.url + '/delete', data).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            if (this.tableData.length === 1 && this.queryForm.page !== 0) {
                                this.queryForm.page--
                            }
                            this.searchBtn()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        deletes() {
            this.$confirm(this.confirmText1, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', this.url + '/deletes', { idList: this.idList }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            if (this.queryForm.page !== 0) {
                                this.queryForm.page--
                            }
                            this.searchBtn()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        edit(data) {
            requestApi('post', this.url + '/edit', this.to(deepClone(data))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.searchBtn()
                    this.$refs.zyform.closeDialog()
                }
            })
        },
        getlist() {
            this.loading = true
            requestApi('post', this.url + `/getlist`, this.queryForm)
                .then((res) => {
                    this.tableData = res.data.data
                    this.pagination = res.data.pagination
                    if (res.data.stat) {
                        this.stat = res.data.stat
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
        handleContextMenu(row) {},
    },
    computed: {
        operate() {
            return parseInt(sessionStorage.getItem('operate')) === 1
        },
    },
}
</script>

<style lang="less" scoped>
#manage {
    height: 100%;
    width: 100%;

    .manage_bottom {
        width: 100%;
        height: calc(100% - 130px);
        position: relative;

        .table {
            position: absolute;
            left: 2%;
            width: 96%;
            height: 100%;

            .table_mask {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-image: url(@/assets/common/table_bg.png);
                background-size: 100% 100%;
                opacity: 0.7;
                z-index: -50;
            }

            .table_header {
                height: 46px;
                line-height: 46px;
                width: 100px;
                display: none;
                position: absolute;
                top: 10px;
                right: 20px;
                display: flex;
                justify-content: space-around;

                .table_header_item {
                    display: flex;
                    height: 100%;
                    width: 60px;
                    color: white;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;

                    // background-color: pink;
                    img {
                        height: 20px;
                    }
                }

                .table_header_item:hover {
                    cursor: pointer;
                }
            }

            .table_list {
                position: absolute;
                left: 3%;
                top: 46px;
                width: 94%;
                height: calc(100% - 126px);

                .warn_span {
                    color: #f9f9f9;
                    font-size: 18px;
                }

                .warn_span_1 {
                    color: aqua;
                }
            }

            .table_bottom {
                width: 94%;
                height: 46px;
                // background-color: red;
                position: absolute;
                left: 3%;
                bottom: 30px;
                display: flex;
                justify-content: center;
            }
        }
    }

    .manage_top {
        width: 100%;
        height: 120px;
        padding: 0 2%;
        margin-top: 10px;

        .form {
            background-image: url(@/assets/common/Form_bg.png);
            background-size: 100% 100%;
            width: 96%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .table_title {
            font-size: 20px;
            color: #00ddff;
            font-weight: 600;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            background-image: url(@/assets/common/form_item_bg.png);
            background-size: 100% 100%;
            padding: 0 20px;
        }

        .btns {
            flex: 1;
            display: flex;
            justify-content: right;

            .el-button {
                width: 80px;
                margin-left: 20px;
                height: 100%;
                background-color: #007bff;
                border-color: #007bff;
                color: white;
                display: flex;
                justify-content: center !important;
            }
        }
    }
}
</style>
